<template>
	<div class="h-popup">
		<el-button type="primary" @click="dialogVisible = true">查看详情</el-button>
		<!-- :before-close="dialogBeforeClose" -->
		<el-dialog title="海洋平台详情" :visible.sync="dialogVisible" width="780px">
			<div class="dialog">
				<ul>
					<li>
						<span>平台名称：</span>
						<span>海洋平台981</span>
					</li>
					<li>
						<span>平台编号：</span>
						<span>WEN14_3WHPA-SPO-01</span>
					</li>
					<li>
						<span>EDIS编码：</span>
						<span>WEN14_3WHPA-SPO-01</span>
					</li>
					<li>
						<span>地理信息编码：</span>
						<span>DD-DWG-FPSO(TS) -PR01 </span>
					</li>
					<li>
						<span>国别：</span>
						<span> 中国</span>
					</li>

					<li>
						<span>行业：</span>
						<span>上游</span>
					</li>
					<li>
						<span>所属公司：</span>
						<span>南海西部分公司 </span>
					</li>
					<li>
						<span>所属区域：</span>
						<span>浮式生产储油装置 </span>
					</li>

					<li>
						<span>所属油田：</span>
						<span>流花11-1 </span>
					</li>
					<li>
						<span>平台分类：</span>
						<span>FPSO </span>
					</li>
				</ul>

				<p>
					<span>平台描述：</span>
					<span
						>由上层工作甲板、下层浮体结构、中间立柱或桁架3 部分组成。下层浮体结构又分下船体式和
						浮箱式两种，下船体式更利于航行，故新建造的自航半潜式平台多采用双下船体式。这种平台
					</span>
				</p>
			</div>
			<div slot="footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false
			}
		},

		methods: {}
	}
</script>

<style lang="scss" scoped>
	// @import "../css/dataDic.scss";
	// 首页查看详情弹窗
	$c85: rgba(0, 0, 0, 0.85);
	$c65: rgba(0, 0, 0, 0.65);

	.h-popup {
		.dialog {
			border-top: 1px solid #ccc;
			// border-bottom: 1px solid #ccc;
			padding-bottom: 30px;

			ul {
				display: flex;
				flex-wrap: wrap;

				li {
					width: 50%;
					line-height: 60px;

					// text-align: center;
					span:nth-child(1) {
						color: $c85;
					}

					span:nth-child(2) {
						color: $c65;
					}
				}
			}

			> p {
				display: flex;

				span:nth-child(1) {
					flex: 1.1;
					color: $c85;
				}

				span:nth-child(2) {
					flex: 10;
					color: $c65;
				}
			}
		}
	}
</style>
